<script lang="ts" setup name="shipment">
import { MemberAddressItem } from '@/types/address'
// 接收类型数据
defineProps<{ addressList: MemberAddressItem[] }>()
const navigatorTO = () => uni.navigateTo({ url: '/pages/my/address/form' })
</script>

<template>
  <view class="title">配送至</view>
  <view class="shipment">
    <view class="item" v-for="i in addressList" :key="i.id">
      <view class="user">{{ i.receiver }} {{ i.contact }} </view>
      <view class="address">{{ i.fullLocation }}</view>
      <text class="icon" :class="{ 'icon-checked': !i.isDefault, 'icon-ring': i.isDefault}"></text>
      <text v-if="i.isDefault === 0" class="badge"> 默认 </text>
    </view>
  </view>
  <view v-if="!addressList.length" class="blank">收货地址为空~</view>
  <view class="footer">
    <view class="button primary" @tap="navigatorTO"> 新建地址 </view>
    <view v-if="false" class="button primary">确定</view>
  </view>
</template>

<style>
.shipment {
  min-height: 300rpx;
  max-height: 540rpx;
  overflow: auto;
  padding: 20rpx 10rpx !important;
}

.shipment .item {
  padding: 30rpx 50rpx 30rpx 60rpx;
  background-size: 40rpx;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
  position: relative;
}

.shipment .item .icon {
  color: #999;
  font-size: 40rpx;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
}

.shipment .item .icon-checked {
  color: #27ba9b;
}

.shipment .item .icon-ring {
  color: #444;
}

.shipment .item .user {
  font-size: 28rpx;
  color: #444;
  font-weight: 500;
}

.shipment .item .address {
  font-size: 26rpx;
  color: #666;
}
.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
.shipment .item .badge {
  display: inline-block;
  padding: 4rpx 10rpx 2rpx 14rpx;
  margin: 2rpx 0 0 10rpx;
  font-size: 26rpx;
  color: #27ba9b;
  border-radius: 6rpx;
  border: 1rpx solid #27ba9b;
}
</style>
